<template>

  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>铸职</span>
                <a href="tel:+1-(514)-312-5678">智能求职平台</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="log-in" v-if="userInfo.value === ''">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    登录
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    注册
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/HomePage')">
                    首页
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo.status === 0" @click="router.push('/RecommendJobPage')">
                    工作推荐
                  </a>
                  <a href="" class="nav-link" v-if="userInfo.status === 1" @click="router.push('/RecommendResumePage')">
                    简历推荐
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/JobList')">
                    搜索
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo.status === 0" @click="router.push('/UserPersonalPage')">
                    个人页面
                  </a>
                  <a href="" class="nav-link" v-if="userInfo.status === 1" @click="router.push('/CompanyPersonalPage')">
                    个人页面
                  </a>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link active" @click="router.push('/test')">
                    分析
                  </a>
                </li>

              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="" class="default-btn" v-if="userInfo.status === 0" @click="router.push('/UserPersonalPage')">
                    写简历
                  </a>
                  <a href="#" class="default-btn" v-if="userInfo.status === 1" @click="router.push('/recruitTest')">
                    发布职位
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    写简历
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Page Title Area -->
  <div class="page-title-area">
    <div class="container">
      <div class="page-title-content">
        <h2>分析面板</h2>
        <ul>
          <li>
            <a href="index.html">
              首页
            </a>
          </li>

          <li class="active">分析面板</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Page Title Area -->


  <section class="candidates-dashboard-area ptb-100">
    <div class="container">
      <div class="analysis-container">
        <el-row :gutter="30">

          <el-col :span="30">
            <el-text class="mx-1" type="primary" size="large">工作地点：</el-text>
            <el-cascader :options="location" @change="locaSelectChange" popper-class="custom-cascader-menu">
              <template #default="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
          </el-col>


          <el-col :span="30">
            <el-text class="mx-1" type="primary" size="large">期待行业：</el-text>
            <el-cascader :options="options" @change="onSelectChange" popper-class="custom-cascader-menu">
              <template #default="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
          </el-col>

        </el-row>

        <el-row>
          <el-text class="mx-1" type="primary" size="large">资历情况：</el-text>
          <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="经验不限" value="0"/>
            <el-radio-button label="1年以上" value="1"/>
            <el-radio-button label="3年以上" value="3"/>
            <el-radio-button label="5年以上" value="5"/>
            <el-radio-button label="10年以上" value="10"/>
          </el-radio-group>
        </el-row>

        <el-row>
          <el-col :span="20">
            <el-text class="mx-1" type="primary" size="large">学历情况：</el-text>
            <el-radio-group v-model="radio2" size="large">
              <el-radio-button label="学历不限" value="学历不限"/>
              <el-radio-button label="中专/中技" value="中专/中技"/>
              <el-radio-button label="大专" value="大专"/>
              <el-radio-button label="本科" value="本科"/>
              <el-radio-button label="硕士" value="硕士"/>
              <el-radio-button label="博士" value="博士"/>
            </el-radio-group>
          </el-col>

          <el-col :span="50">
            <el-button type="primary" size="large" @click="submitForm">提交</el-button>
          </el-col>
        </el-row>

        <el-divider direction="horizontal" content-position="center">可视化界面显示在下部</el-divider>

        <el-row justify="space-between">
          <div id="main_line" style="width:100%;height: 450px"></div>
        </el-row>

        <div class="pie">
          <el-row :gutter="30">
            <el-col :span="12">
              <div id="main_pie1" style="height: 600px;width: 700px"></div>
            </el-col>

            <el-col :span="12">
              <div id="main_pie2" style="height: 600px;width: 700px"></div>
            </el-col>

            <el-col :span="13">
              <div id="main_pie3" style="height: 600px;width: 700px"></div>
            </el-col>

          </el-row>
        </div>
        <div class="WorkRole">
          <el-row justify="space-between">
            <div id="main_Role" style="width:100%;height:600px"></div>
          </el-row>

          <el-row :gutter="30" justify="space-between">
            <el-col :span="8">
              <div id="Role_pie1" style="height: 600px;width: 450px"></div>
            </el-col>

            <el-col :span="8">
              <div id="Role_pie2" style="height: 600px;width: 450px"></div>
            </el-col>

            <el-col :span="8">
              <div id="Role_pie3" style="height: 600px;width: 450px"></div>
            </el-col>

          </el-row>
        </div>
      </div>
    </div>
  </section>

  <!-- Start Subscribe Area -->
  <section class="subscribe-area">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>找事儿，一期搞定</h2>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>铸职智能求职系统，是一个创新的在线招聘平台，旨在重塑求职者的探索旅程与企业的招聘体验。我们融合了先进的数据分析技术、人工智能算法与用户至上的设计理念，为求职者打造个性化、高效的职业匹配通道，同时为企业提供精准的人才筛选与招聘解决方案。</p>

          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>联系方式</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>联系电话:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>邮箱:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>地址:</span>
                江西省南昌市南昌航空大学
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>帮助</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>猎头</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.0.
      </p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->
</template>

<script lang="ts" setup>

import { ElDivider } from 'element-plus';
import {ref, watch} from 'vue';


import {analysisJob, JobRequirement, JobworkRole} from "@/api/analysis";
import {base_line} from "@/view/analysis/analysis_echarts/Line";
import {base_pie} from "@/view/analysis/analysis_echarts/RequirementPie.ts";
import {role_line_bar, degree_pie} from "@/view/analysis/analysis_echarts/WorkRole.ts";
import {useRoute, useRouter} from "vue-router";
import {getUserInfoService} from "@/api/user.js";

const router = useRouter();
//获取用户信息
const userInfo = ref({})
async function getUserInfo(){
  let res = await getUserInfoService()
  userInfo.value = res.data
}

getUserInfo()

const radio1 = ref('')
const radio2 = ref('')
const location = ref([
  {
    value: 'shanghai',
    label: '上海',
    children: [
      {
        value: 'shanghai',
        label: '上海',
      },

    ],
  },
  {
    value: '江苏',
    label: '江苏',
    children: [
      {
        value: '南京',
        label: '南京',
      },

    ],
  },
  {
    value: '北京',
    label: '北京',
    children: [
      {
        value: '北京',
        label: '北京',
      },

    ],
  },
  {
    value: '广东',
    label: '广东',
    children: [
      {
        value: '深圳',
        label: '深圳',
      },

    ],
  },
]);

const options = ref([
  {
    value: 'houduan',
    label: '后端',
    children: [
      {
        value: 'java',
        label: 'java',
      },
      {
        value: 'C',
        label: 'C',
      },
    ],
  },
  {
    value: 'qianduan',
    label: '前端',
    children: [
      {
        value: '前端',
        label: '前端工程师',
      },
    ]
  },
  {
    value: '算法',
    label: '算法',
    children: [
      {
        value: '算法工程师',
        label: '算法工程师',
      },
    ]
  },
]);
// 定义状态变量来保存选择的值

const searchForm = ref({
  tags: '',
  location: '',
  experience: '',
  degree: '',
});
const jobModal = ref([
      {
        jobId: '',
        companyId: '',
        companyName: '',
        name: '',
        salary: '',
        salaryYear: '',
        tags: '',
        location: '',
        hr: '',
        description: '',
        degree: '',
        experience: ''
      },
    ]
)

async function searchJobs() {
  console.log(searchForm.value)
  let result = await analysisJob(searchForm.value);
  jobModal.value = result.data

  jobModal.value.sort((a, b) => a.salaryYear - b.salaryYear);


  const salaryYears = jobModal.value.map(item => item.salaryYear);

  // 计算 salaryYears 的平均值
  const averageSalary = salaryYears.reduce((accumulator, currentValue) => accumulator + currentValue, 0) / salaryYears.length;

  const jobId = jobModal.value.map(item => item.jobId);
  base_line(salaryYears, jobId, averageSalary);
}

// 技能饼状图
async function requirementPie() {
  let result = await JobRequirement(searchForm.value);
  const caverageSalaries = result.data.averageSalaries
  const lower25PercentRequirements = result.data.lower25PercentRequirements
  const middle50PercentRequirements = result.data.middle50PercentRequirements
  const upper25PercentRequirements = result.data.upper25PercentRequirements
  const lowerPercentNum = result.data.lower25Percent
  const middle50PercentNum = result.data.middle50Percent
  const upper25PercentNum = result.data.upper25Percent

  base_pie(caverageSalaries[0], lower25PercentRequirements, lowerPercentNum, "main_pie1")
  base_pie(caverageSalaries[2], middle50PercentRequirements, middle50PercentNum, "main_pie2")
  base_pie(caverageSalaries[1], upper25PercentRequirements, upper25PercentNum, "main_pie3")

}

async function analysisWorkRole() {
  let result = await JobworkRole(searchForm.value);
  // 总共人数，平均薪水，平均年限
  // 开发，架构，管理
  const devAndEngNum = Math.floor(result.data.devAndEngNum);
  const archNum = Math.floor(result.data.archNum);
  const mgmtNum = Math.floor(result.data.mgmtNum);

  const devAndEngdevAndEngSalary = Math.floor(result.data.devAndEngSalary);
  const archSalary = Math.floor(result.data.archSalary);
  const mgmtSalary = Math.floor(result.data.mgmtSalary);


  const devAndEngAvg = result.data.devAndEngAvg.toFixed(2);
  const archAvg = result.data.archAvg.toFixed(2);
  const mgmtAvg = result.data.mgmtAvg.toFixed(2);
  role_line_bar(devAndEngNum, archNum, mgmtNum, devAndEngdevAndEngSalary, archSalary, mgmtSalary, devAndEngAvg, archAvg, mgmtAvg, "main_Role")
  const devAndEngDegree = result.data.devAndEngDegree
  const archDegree = result.data.archDegree
  const mgmtDegree = result.data.mgmtDegree
  degree_pie(devAndEngDegree, "Role_pie1")
  degree_pie(archDegree, "Role_pie2")
  degree_pie(mgmtDegree, "Role_pie3")


  console.log(result.data)
}


const submitForm = () => {


  // 获取单选组的值
  const selectedRadio1 = radio1.value;
  const selectedRadio2 = radio2.value;

  // 将获取的值赋给searchForm对象的相应属性
  searchForm.value.experience = selectedRadio1; // 假设selectedRadio1对应experience
  searchForm.value.degree = selectedRadio2; // 假设selectedRadio2对应degree
  // console.log(searchForm)
  searchJobs()
  requirementPie()
  analysisWorkRole()


  // 这里可以添加发送POST请求的逻辑，将收集到的数据一起发送
};
const onSelectChange = async (selectedValues: string[]) => {
  if (selectedValues.length >= 2) {
    const secondLevelValue = selectedValues[1];
    const findSecondLevelLabel = (options: any[]) => {
      for (const option of options) {
        if (option.children) {
          for (const child of option.children) {
            if (child.value === secondLevelValue) {
              return child.label;
            }
          }
        }
      }
      return null;
    };
    searchForm.value.tags = findSecondLevelLabel(options.value);

  }
};
const locaSelectChange = async (selectedValues: string[]) => {
  if (selectedValues.length >= 2) {
    const secondLevelValue = selectedValues[1];
    const findSecondLevelLabel = (options: any[]) => {
      for (const option of options) {
        if (option.children) {
          for (const child of option.children) {
            if (child.value === secondLevelValue) {
              return child.label;
            }
          }
        }
      }
      return null;
    };
    searchForm.value.location = findSecondLevelLabel(location.value);

  }
};
</script>

<style>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";


.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.pie {

}


/*只对二级菜单应用自定义样式*/
.custom-cascader-menu .el-cascader-menu__list {
  display: flex !important;
  flex-wrap: wrap !important;
  /*width: auto !important;*/
  min-width: 100px;
  max-width: 300px;
}

/* 设置二级菜单的每个项的样式 */
.custom-cascader-menu .el-cascader-menu__list .el-cascader-menu__item {
  flex: 1 1 30% !important; /* 每行显示5个元素 */
  box-sizing: border-box !important;
  padding: 2px !important; /* 可根据需要调整 */
  margin: 2px 0 !important; /* 设置上下间隔，减少行间距 */
}

/* 确保每个菜单项在悬停时背景色变化 */
.custom-cascader-menu .el-cascader-menu__item:hover {
  background-color: #f5f5f5 !important;
}

/*#parent-container {*/
/*  display: flex;*/
/*}*/
/*#chart {*/
/*  flex-grow: 1;*/
/*  width: 100%;*/
/*}*/


.analysis-container{
  background-color: whitesmoke;
  padding: 20px;
}
</style>
